<template>
  <div class="game-container">
    <h1>连连看游戏</h1>
    <div class="grid">
      <div
        v-for="(item, index) in grid"
        :key="index"
        class="grid-item"
        :class="{ 'is-flipped': item.revealed }"
        @click="selectItem(index)"
      >
        <div class="grid-item-inner">
          <div class="grid-item-front">
            <!-- 卡片背面 -->
            <div class="card-back">?</div>
          </div>
          <div class="grid-item-back">
            <!-- 卡片正面 -->
            <img :src="item.image" alt="item" />
          </div>
        </div>
      </div>
    </div>
    <div class="game-stats">
      <p>已选择: {{ selectedItems.length }}</p>
      <p>得分: {{ score }}</p>
    </div>
  </div>
</template>
  
<script setup lang="ts">
import { ref } from "vue";

interface Item {
  image: string;
  revealed: boolean;
}

// 更新图片路径
const images = [
  new URL("../assets/images/image1.jpeg", import.meta.url).href,
  new URL("../assets/images/image2.jpg", import.meta.url).href,
  new URL("../assets/images/image3.jpeg", import.meta.url).href,
  new URL("../assets/images/image4.jpeg", import.meta.url).href,
  new URL("../assets/images/image5.jpeg", import.meta.url).href,
  new URL("../assets/images/image6.jpeg", import.meta.url).href,
  new URL("../assets/images/image7.jpeg", import.meta.url).href,
  new URL("../assets/images/image8.jpeg", import.meta.url).href,
  new URL("../assets/images/image9.jpeg", import.meta.url).href,
  new URL("../assets/images/image10.jpeg", import.meta.url).href,
];

const grid = ref<Item[]>([]);
const selectedItems = ref<number[]>([]);
const score = ref<number>(0);

const initializeGrid = () => {
  const items: Item[] = [...images, ...images].map((image) => ({
    image,
    revealed: false,
  }));
  // 打乱数组
  for (let i = items.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [items[i], items[j]] = [items[j], items[i]];
  }
  grid.value = items;
};

const selectItem = (index: number) => {
  if (selectedItems.value.length < 2 && !grid.value[index].revealed) {
    grid.value[index].revealed = true;
    selectedItems.value.push(index);
    if (selectedItems.value.length === 2) {
      // 检查匹配
      setTimeout(() => {
        checkMatch();
      }, 1000);
    }
  }
};

const checkMatch = () => {
  const [firstIndex, secondIndex] = selectedItems.value;
  if (grid.value[firstIndex].image === grid.value[secondIndex].image) {
    score.value += 10;
  } else {
    grid.value[firstIndex].revealed = false;
    grid.value[secondIndex].revealed = false;
  }
  selectedItems.value = [];
};

initializeGrid();
</script>
  
<style scoped>
.game-container {
  text-align: center;
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.grid-item {
  width: 100px;
  height: 100px;
  perspective: 1000px; /* 3D效果 */
  cursor: pointer;
}
.grid-item-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.grid-item.is-flipped .grid-item-inner {
  transform: rotateY(180deg);
}
.grid-item-front,
.grid-item-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: white;
}
.grid-item-front {
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-back {
  font-size: 2em;
  color: #666;
}
.grid-item-back {
  transform: rotateY(180deg);
}
.grid-item-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.game-stats {
  margin-top: 20px;
  font-size: 1.2em;
  font-weight: bold;
}
</style>